// 在 React 中实现倒计时功能可以通过 状态管理 和 副作用钩子（useEffect） 结合实现
// 基础倒计时组件（支持暂停/继续）


import React, { useState, useRef, useEffect } from 'react'

function CountdownTimer({ initialSeconds = 60 }) {
  const [seconds, setSeconds] = useState(initialSeconds);
  const [isActive, setIsActive] = useState(false);
  const timerRef = useRef(null);
  // timerRef 是一个 useRef 创建的引用对象，它的主要作用是在组件的不同渲染周期中保存定时器的 ID，以便后续能够清除该定时器

  // 倒计时
  useEffect(() => {
    if (isActive && seconds > 0) {
      timerRef.current = setInterval(() => {
        setSeconds(prev => Math.max(0, prev - 1)) // 使用函数式更新确保准确性,防止负数时间
      }, 1000);
    } else if (seconds === 0) {
      clearInterval(timerRef.current);
    }

    // 组件卸载时清理定时器
    return () => clearInterval(timerRef.current);
  }, [isActive, seconds])

  // 开始/暂停
  const toggleTimer = () => setIsActive(!isActive)

  // 重置
  const resetTimer = () => {
    clearInterval(timerRef.current);
    setIsActive(false);
    setSeconds(initialSeconds);
  }

  // 格式化时间显示 (00:00)
  const formatTime = (time) => {
    const hours = Math.floor(time / 60 / 60).toString().padStart(2, '0');
    const mins = Math.floor(time / 60).toString().padStart(2, '0');
    const secs = (time % 60).toString().padStart(2, '0')
    return `${hours}:${mins}:${secs}`
  }
  // padStart() 用于在字符串的开头填充指定的字符，直到字符串达到指定的长度。

  return (
    <div className="countdown">
      <h1>{formatTime(seconds)}</h1>
      <button onClick={toggleTimer}>
        {isActive ? '⏸️ 暂停' : '▶️ 开始'}
      </button>
      <button onClick={resetTimer}>🔄 重置</button>
    </div>
  )
}

// 使用示例
<CountdownTimer initialSeconds={120} />